<template>
  <div class="app-details" ref="detailsBox">
    <!-- 置顶导航 start-->
    <header v-show="showFixedHeader" class="app-details-header _justify_around _align_center">
      <a @click="back" class="_bgimg_content" style="background-image:url(./images/icon_black_1.png)"></a>
      <ul class="_flex_x _justify_around">
        <li @click="select(1)" :class="{'selected':selectedLi===1}">商品</li>
        <li @click="select(2)" :class="{'selected':selectedLi===2}">评价</li>
        <li @click="select(3)" :class="{'selected':selectedLi===3}">参数</li>
        <li @click="select(4)" :class="{'selected':selectedLi===4}">详情</li>
      </ul>
      <a href class="_bgimg_content" style="background-image:url(./images/icon_more_black.png)"></a>
    </header>
    <!-- 置顶导航 end-->
    <!-- 主体 start-->
    <div class="_flex_y">
      <!-- 商品大图轮播 start-->
      <div class="swiper-container details-top-banner">
        <header class="banner-header _justify_between _align_center">
          <a @click="back"  class="backBtn _bgimg_content" style="background-image:url(./images/icon_back_grey.png)"></a>
            
          <a href class="moreBtn _bgimg_content" style="background-image:url(./images/icon_more_grey.png)"></a>
        </header>
        <div class="swiper-wrapper">
          <div class="swiper-slide _flex_x" v-for="num in 8" :key="num">
            <img src="https://res.vmallres.com/pimages//product/6901443260232/group//428_428_1539230406250.png" alt="">
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>  
      <!-- 商品大图轮播 end-->
      <!-- 详情 start -->
      <div class="details-content" v-html="detailsContent">

      </div>
      <!-- 详情 end  -->
    </div>
    <!-- 主体 end-->
    <footer class="_align_center">
      <ul class="_flex_x">  
        <router-link tag="li" to="/home">
          <b class="_bgimg_content" style="background-image:url(./images/icon-home-black.png)"></b>
          <span>首页</span>
       </router-link>
        <li>
          <b  class="_bgimg_content" style="background-image:url(./images/icon-home-black.png)"></b>
          <span>客服</span>
        </li>
        <router-link tag="li" to="/shopcar">
          <b class="_bgimg_content" style="background-image:url(./images/icon-cart-black.png)"></b>
          <span>购物车</span>
       </router-link>
      </ul>
      <div class="btn">
        <a href="" @click="addShopCar">加入购物车</a>
        <a href="">立即购买</a>
      </div>
    </footer>
  </div>
</template>

<script>
import * as http  from 'utils/http';
import scroll from 'utils/scroll';
export default {
  data() {
    return {
      selectedLi: 1,
      showFixedHeader:false,
      detailsContent:''
    };
  },
  methods: {
    select(n) {
      this.selectedLi = n;
    },
    back(){
      this.$router.go(-1)
    },
    addShopCar(){
      
    }
  },
 async created(){
    this.detailsContent=(await http.get(this,'product/prdDetailInfo.json?skuId=10086511497719')).prdDetailInfo 
      new Swiper(".details-top-banner", {
          autoplay: 2000,
          autoplayDisableOnInteraction : false,
          pagination : '.swiper-pagination',
      });
  },
  async mounted(){
    await scroll(this,'detailsBox')
    this.detailsBox.on('scroll',()=>{
      this.showFixedHeader=this.detailsBox.y<-52?true:false;
    })
  }
};
</script>

<style lang="stylus" scoped>
.app-details
  height 100%
  overflow hidden 
  .app-details-header
    height 0.5rem
    position fixed
    top 0
    width 100%
    z-index 10000
    background #fff
    a
      width 0.31rem
      height 0.31rem
    ul
      width 2.34rem
      height 0.31rem
      line-height 0.31rem
      text-align center
      li
        width 0.38rem
        font-size 0.16rem
        position relative
        background #fff
        &.selected
          color #cc0e11
          &::after
            content ''
            position absolute
            bottom 0
            right 0.07rem
            width 0.24rem
            height 0.02rem
            border-radius 0.005rem
            background-color #cc0e11
  .details-top-banner
    width 3.75rem
    height 3.46rem
    position relative
    .banner-header
      position absolute
      height .52rem
      width 3.43rem
      padding 0 .16rem
      z-index 9999
      a 
        width .31rem
        height .31rem 
        background-color rgba(0,0,0,0.1)
        border-radius 50%
    .swiper-slide
      display flex
      justify-content center
      align-items center
      img 
        width 3.46rem 
  .details-content
      width 100%
      overflow hidden
      &>>>img 
        width 3.75rem 
  footer 
    position fixed
    bottom 0
    z-index 9999
    width 100%
    display flex
    height .5rem
    background #fff
    ul
      width 1.56rem
      li 
        flex 1
        display flex
        flex-direction column
        align-items  center
        b 
          width .25rem
          height .25rem
        span 
          flex 1  
          line-height .25rem
    .btn  
      flex 1 
      display flex 
      a 
        color #ffffff
        font-size .16rem
        width 1.04rem 
        height .38rem
        line-height .38rem
        text-align center
        background-image linear-gradient(90deg,#ff814a 0,#f45333 100%)
        border-radius   .19rem 0 0 .19rem 
        &:nth-of-type(2)
          border-radius 0 .19rem  .19rem 0

</style>


